<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('LayerDynamicMapsEngineCtrl', function() {
  var vm = this;
  vm.onMouseover = function(event) {
    var fillArray = ['red', 'blue', 'yellow', 'green'];
    var style = this.getFeatureStyle(event.featureId);
    style.fillColor = fillArray[event.featureId - 1];
    style.fillOpacity = '0.8';
  };
  vm.onMouseout = function(event) {
    this.getFeatureStyle(event.featureId).resetAll();
  };
});
</script>
</head>
<body>
  Circle Simple<br/>
  This example creates circles on the map, representing
  populations in North America.
  <div ng-controller="LayerDynamicMapsEngineCtrl as vm">
    <ng-map center="59.322506, 18.010025" zoom="14">
      <dynamic-maps-engine-layer
        suppress-info-windows="true"
        clickable="true"
        on-mouseover="vm.onMouseover()"
        on-mouseout="vm.onMouseout()"
        layer-id="06673056454046135537-08896501997766553811">
      </dynamic-maps-engine-layer>
    </ng-map>
  </div>
</body>
</html>
